<template>
  <div>
    <div class="top">
      <span @click="fun()">&lt;</span>|
      <span class="iconfont">商城</span>
    </div>

    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="../../public/img/11.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img src="../../public/img/22.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img src="../../public/img/33.jpg" alt=""></van-swipe-item>
        <!-- <van-swipe-item>4</van-swipe-item> -->
      </van-swipe>
      <div class="small-img">
        <img src="../../public/img/11.jpg" alt="">
        <img src="../../public/img/22.jpg" alt="">
       <img src="../../public/img/33.jpg" alt="">
      </div>
    </div>
    <p class="price">￥569.00-769.00</p>
    <p>价格<del>￥769</del></p>
    <div class="jian">
      <div>
        <span>每一件减20 </span>
        <span>换购</span>
      </div>
      <span>查看优惠&gt;</span>
    </div>
    <div class="title">
        <p>{{this.$route.query.luyou}}</p>
        <div>
            <van-icon name="share-o" />         
            <span>分享</span>
        </div>
    </div>
   <shopm/>

    <van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服"  />
  <van-goods-action-icon icon="shop-o" text="店铺"  />
  <van-goods-action-icon icon="cart-o" text="购物车" badge="1" />
  <router-link to="/shop"><van-goods-action-button type="warning" text="加入购物车" /></router-link>
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
  </div>
</template>

<script>
import Shopm from '@/components/shopp/shopm.vue';

export default {
  components: { Shopm,},
  methods: {
    fun() {
      this.$router.push("/home");
    },
  },
};
</script>

<style scoped>
.top {
  width: 0.75rem;
  height: 0.25rem;
  line-height: 0.25rem;
  font-weight: 600;
  font-size: 0.2rem;
  display: flex;
  justify-content: space-around;
  border-radius: 0.2rem;
  margin: 0.1rem 0.1rem;
  border: 1px solid rgba(128, 128, 128, 0.698);
}
.top button {
  border: none;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  margin-bottom: 0.1rem;
}
.my-swipe img{
  width: 100%;
  height: 335px;
}
.van-swipe-item {
  width: 3.35rem;
  height: 3.35rem;
}
.small-img img {
  width: 0.5rem;
  height: 0.5rem;
}
.small-img {
  width: 1.8rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.price {
  font-size: 0.2rem;
  color: red;
  font-weight: 700;
  height: 0.4rem;
  line-height: 0.4rem;
}
.jian{
    color: red;
    margin: .1rem .2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: .14rem;
}
.jian div span{
  background-color: rgb(243, 222, 222);
  margin-right: .1rem;
}
.title{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.title p{
    text-indent: .05rem;
    width: 2.9rem;
    font-weight: 600;
font-size: .16rem;
}
.title div{
    display: flex;
    text-align: center;
    flex-direction: column;
}
a{
margin-bottom: 0.06rem;
}
</style>